<template>
  <view class="login-page">
    <view class="login-card">
      <view class="title">登录</view>
      
      <view class="input-group">
        <view class="input-item">
          <text class="label">手机号</text>
          <input 
            type="number" 
            v-model="form.phone" 
            placeholder="请输入手机号"
            maxlength="11"
          />
        </view>
        
        <view class="input-item">
          <text class="label">验证码</text>
          <view class="code-input">
            <input 
              type="number" 
              v-model="form.code" 
              placeholder="请输入验证码"
              maxlength="6"
            />
            <button 
              class="code-btn" 
              :disabled="counting > 0"
              @tap="sendCode"
            >
              {{counting > 0 ? `${counting}s` : '获取验证码'}}
            </button>
          </view>
        </view>
      </view>

      <button class="submit-btn" type="primary" @tap="handleLogin">登录</button>
      
      <view class="agreement">
        登录即代表同意
        <text class="link">《用户协议》</text>
        和
        <text class="link">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phone: '',
        code: ''
      },
      counting: 0
    }
  },
  methods: {
    // 发送验证码
    sendCode() {
      if (!/^1\d{10}$/.test(this.form.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      // TODO: 调用发送验证码接口
      this.counting = 60
      const timer = setInterval(() => {
        this.counting--
        if (this.counting <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
    
    // 处理登录
    handleLogin() {
      if (!/^1\d{10}$/.test(this.form.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      if (!/^\d{6}$/.test(this.form.code)) {
        uni.showToast({
          title: '请输入正确的验证码',
          icon: 'none'
        })
        return
      }
      
      // TODO: 调用登录接口
      // 模拟登录成功
      const userInfo = {
        isLogin: true,
        avatar: '/static/images/default-avatar.png',
        nickname: '用户' + this.form.phone.substr(-4),
        phone: this.form.phone
      }
      
      uni.setStorageSync('userInfo', JSON.stringify(userInfo))
      
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })
      
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  }
}
</script>

<style lang="less">
@import '../../styles/uni.less';

.login-page {
  min-height: 100vh;
  background-color: @bg-color;
  padding: @spacing-xl;
}

.login-card {
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: @text-color;
    margin-bottom: @spacing-xl;
  }
}

.input-group {
  margin: @spacing-xl 0;
  
  .input-item {
    margin-bottom: @spacing-lg;
    
    .label {
      font-size: @font-size-md;
      color: @text-color;
      margin-bottom: @spacing-sm;
      display: block;
    }
    
    input {
      height: 88rpx;
      background-color: @bg-color-grey;
      border-radius: @border-radius-md;
      padding: 0 @spacing-lg;
      font-size: @font-size-lg;
    }
    
    .code-input {
      display: flex;
      align-items: center;
      
      input {
        flex: 1;
        margin-right: @spacing-md;
      }
      
      .code-btn {
        width: 200rpx;
        height: 88rpx;
        line-height: 88rpx;
        font-size: @font-size-md;
        padding: 0;
        
        &[disabled] {
          background-color: @bg-color-grey;
          color: @text-color-light;
        }
      }
    }
  }
}

.submit-btn {
  margin-top: @spacing-xl;
  height: 88rpx;
  line-height: 88rpx;
  font-size: @font-size-lg;
}

.agreement {
  margin-top: @spacing-lg;
  text-align: center;
  font-size: @font-size-sm;
  color: @text-color-light;
  
  .link {
    color: @primary-color;
  }
}
</style> 